<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>Insert title here</title>

<style type="text/css">
body{padding-bottom:50px;
}
body div{border:0px !important ;
}
.main{width:70%; margin-left: 15%;margin-right: 15%;float: left;padding-bottom: 40px;
}
.main div{float: left;
}
.left{width:73%;height:600px;margin-left: 20px;border-radius:0px !important;
border:0px;
border-right:1px solid green !important;
}
.right{width:22%;height:490px;
}
.images:hover{border:1px solid #f6ad90 !important;
}
.images{width:31%; height:47%;margin: 5px; border:1px solid white !important;
}

.pic{width:100%;height:68%;
}
.oneuser{width:95%;height:60px; margin:5px;display: none;
}
.oneuser:hover{border:1px solid #f6ad90;background-color: #f6ad90 !important;
}
.head {width:31%; height:100%;border-radius:40px 40px 40px 40px;
}
.head img{border-radius:40px 40px 40px 40px;
}
.username{width:70%;height:100%;background-color: none !important;
}
.username :hover{background-color: none !important;
}
.twobtn{width:200px;height:50px;margin-top: 10px;margin-left: 30px;
position:absolute;top:750px;
}
.wordcontent{
border-bottom:2px solid green !important;
}
.from,.from div{
background-color: #defae5 !important;
}
</style>

<!-- 改变颜色 -->
<script type="text/javascript">
$(function(){
	$('.selected5').css("background","url(images/changeColor.png)");
	$('.selected5').css("color","green");
	
})
</script>


<!-- 自己与自己交流禁止,关注禁止 -->
<script type="text/javascript">
	$(function(){
		$("div[name='myself${user.userID}']").find('input').attr('disabled','disabled');
	})
</script>

<!-- 如果没有登录则无法点击交流***** -->
<script type="text/javascript">
	$(function(){
		var n = "${user}";
		if(n == ""){
			$(".chatbutton").attr("disabled","disabled");
		}
	})
</script>


<script type="text/javascript">
	$(function(){
		$("#leftbtn").attr("disabled", true);
		//设置share.jsp中如果（当前页）pa=1，则上一页按钮不可点， 若pa = 1且总条数小于等于6，则下一页和上一页不可点
		//刚刚进来的时候，设置n1到n6可见， 可以让过滤器来初始化n1到n6为1--6
		if(${sum} <= 6){
			$("#rightbtn").attr("disabled", true);
			
		}
		$("#${n1}").css("display", "block");
		$("#${n2}").css("display", "block");
		$("#${n3}").css("display", "block");
		$("#${n4}").css("display", "block");
		$("#${n5}").css("display", "block");
		$("#${n6}").css("display", "block");
	});
	
</script>

<script type="text/javascript">
//设置按钮已关注*****
//设置点击关注按钮***
$(function(){
	
	$(".focus1").val("已关注");
	$(".focus1").attr('disabled','disabled');
	$(".focus input").click(function(){
		var s = 0;
		if("${user}" != ""){//FocusServlet
			$.ajax({
	            url:"${pageContext.request.contextPath}/FocusServlet",
	            async:false,
	            type:"post",
	            data:{'beUserID':$(this).attr("name"),'userID':'${user.userID}'},
	            dataType:"json",
	            success:function(d){
	            	if(d.focus == "1"){
	            		alert("关注成功");
	            		s = 1;
	            	}else{
	            		alert("关注失败");
	            	}
					
	            }
	        });
		if(s == 1){
			$(this).attr('disabled','disabled');
			$(this).val("已关注");
		}
			
			
		
		}else{
			alert("请先登录");
		}
		
	});
})
</script>

<script type="text/javascript">
	$(function(){
		if("${longg}" == "0"){
			$('.tishi').css('display','display');
		}
	})
</script>



</head>
<body>
<jsp:include page="/top.jsp"></jsp:include>
<div id = "paa" name = "1">
</div>
<div class = "main">
	<div class = "word" style = "border:0px;background-color: white;">
		<div class = "wordcontent" style = "border:0px;border-radius:0px;margin-bottom:10px;border-bottom:3px solid green;float:left;font-size:24px;height:40px;margin-left:20px;line-height: 40px;width:880px;padding:10px;color:green;float:left;">
			<div style = "background-color: white;border:0px;">
				<b style = "font-size: 40px;line-height: 40px;">✉</b>
			</div>
			<div style = "float: left;background-color: white; border:0px;font-weight: bold;">
				分享交流
			</div>
		</div>
	</div>

	<div class = "left" style  = "overflow-y:scroll; "><div class = "tishi" style = "display: none;width:700px;height:100px;text-align: center;line-height: 100px;">该用户没有任何分享</div>
		<c:forEach items = "${beans }" var = "n">
			<div class = "images" style = "background-color: #defae5;border:1px solid white;">
				<div class = "pic" style = "width:90%;height:60%;margin-left:10px;margin-top:10px;">
					<a href = "${pageContext.request.contextPath }/CommentServlet?shareID=${n.shareID}">
						<img alt="" src="${n.path }"  style = "width:100%;height:100%"> 
					</a>
				</div>
				<div class = "from" style = "width:100%;height:11%;text-align: center;line-height: 25px;font-size:12px;color:#999;">
					<div class = "wordleft" style="margin-left:50px;border:0px;">
						来自：
					</div>
					<div class = "headd" style = "width:25px;height:25px;border-radius:40px;">
						<img alt="" src="${n.paths }" style = "width:100%;height:100%;border-radius:40px;">
					</div>
					<div class = "wordright" style = "border:0px;">
						${n.userName }
					</div>
					
				</div>
				<div class = "say" style = "background-color:#defae5;width:85%;padding-left:5%;padding-right:5%;border:0px;border-bottom:1px solid #ccc;font-size:12px;color:#999;height:20%;overflow: hidden;">
					描述：${n.say }	
				</div>
			</div>
		</c:forEach>
	</div>
<!-- 	右框开始 -->
	<div class = "right" style = "margin-left:10px;"><%int i=0; %><div class = "showdiv">
		<c:forEach items = "${Users }" var = "n" varStatus="i">
		<% i++; %>
			<div class = "oneuser" style = "background-color: #defae5;" id = "<%= i%>" name = 'myself${n.userID }'>
		<a href = "${pageContext.request.contextPath }/ShareServlet?page=1&userID=${n.userID}">
				<div class = "head">
					<img alt="" src="${n.path }" style = "width:100%;height:100%;">
				</div>
		</a>
				<div class = "username" style = "width:63%;background-color: none;">${n.userName }<br>
					<div class = "focus" style = "border:0px;margin-top:5px;width:58px;float: left;">
						<input type = "button" value = "关注" name = "${n.userID }"  class = "focus${n.isFocus } ">
						
					</div>
					<div style = "border:0px;float: left;margin-top:5px;width:50px;">
						<a href = "${pageContext.request.contextPath }/ChatServlet?chatUserID=${n.userID}">
							<input type = "button" value = "私信Ta" name = ""  class = "chatbutton">
						</a>
					</div>
				</div>
			</div>
		</c:forEach>
		<div class = "twobtn" style = "background-color: rgba(0,0,0,0); border:0px;">
			<div class = "leftbtn">
				<input type = "button" value="上一页" id = "leftbtn">
			</div>
			<div class = "rightbtn" style = "margin-left: 40px;">
				<input type = "button" value="下一页" id = "rightbtn">
			</div>
		</div>
		
	</div>
<!-- 	右框结束 -->
	
</div>



</body>


<script type="text/javascript">
	$(function(){
		$("#leftbtn").click(function(){
			//去servlet操作之后， 得到当前的新页码pa， 和判断是否有下一页的标签，
			//在此之前要先判断是否pa=1，若是，则上一页不可点
			//根据是否有下一页的标志，去设置按钮可点与不可
			//设置class为${n1}到${n6}的div显示
			//传入的参数要包含是下一页还是上一页，还有当前页
				var url = "${pageContext.request.contextPath}/FindAllUsersServlet";
				
				$.ajax({
	                url:"${pageContext.request.contextPath}/FindAllUsersServlet",
	                async:false,
	                type:"post",
	                data:{'updown':1,'paa':$("#paa").attr("name")},
	                dataType:"json",
	                success:function(d){
	                	$("#paa").attr("name", d.pa);
						 if(d.pa==1){
							$("#leftbtn").attr("disabled",true);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 3){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 1){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",true);
						}
						
						$("#"+d.a).css("display", "block");
						$("#"+d.b).css("display", "block");
						$("#"+d.c).css("display", "block");
						$("#"+d.d).css("display", "block");
						$("#"+d.e).css("display", "block");
						$("#"+d.f).css("display", "block");
						
						$("#"+d.aa).css("display", "none");
						$("#"+d.bb).css("display", "none");
						$("#"+d.cc).css("display", "none");
						$("#"+d.dd).css("display", "none");
						$("#"+d.ee).css("display", "none");
						$("#"+d.ff).css("display", "none");
						
	                }
	            });
				
				
				
			
		});
	});
</script>




<script type="text/javascript">
	$(function(){
		$(".rightbtn").click(function(){
			//去servlet操作之后， 得到当前的新页码pa， 和判断是否有下一页的标签，
			//在此之前要先判断是否pa=1，若是，则上一页不可点
			//根据是否有下一页的标志，去设置按钮可点与不可
			//设置class为${n1}到${n6}的div显示
			//传入的参数要包含是下一页还是上一页，还有当前页
				$.ajax({
	                url:"${pageContext.request.contextPath}/FindAllUsersServlet",
	                async:false,
	                type:"post",
	                data:{'updown':2,'paa':$("#paa").attr("name")},
	                dataType:"json",
	                success:function(d){
	                	$("#paa").attr("name", d.pa);
	                	if(d.pa==1){
							$("#leftbtn").attr("disabled",true);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 3){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 1){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",true);
						}
						
						$("#"+d.a).css("display", "block");
						$("#"+d.b).css("display", "block");
						$("#"+d.c).css("display", "block");
						$("#"+d.d).css("display", "block");
						$("#"+d.e).css("display", "block");
						$("#"+d.f).css("display", "block");
						
						$("#"+d.aa).css("display", "none");
						$("#"+d.bb).css("display", "none");
						$("#"+d.cc).css("display", "none");
						$("#"+d.dd).css("display", "none");
						$("#"+d.ee).css("display", "none");
						$("#"+d.ff).css("display", "none");
	                }
	            });
				
				
			
		});
	});
</script>


<!-- 改变按钮样式 -->

<script type="text/javascript">
	$(function(){
		$("input[type='button']").css('background-color','#defae5');
	})
</script>



<!-- 用户右框的hover尝试 -->
<script type="text/javascript">
	$(function(){
		$("input[type='button']").mouseenter(function(){
			$(this).css('background-color','#f6ad90');
		});
		$("input[type='button']").mouseleave(function(){
			$(this).css('background-color','#defae5');
		});
		
	})
</script>




</html>